<template>
    <popup ref="authorizePopup">
		<view class="authorize-popup">
			<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200913/02bd37f0-f5cc-11ea-aaa2-a3235a7eada2.png"></image>
			<text class="iconfont icon-guanbi" @tap="$refs.authorizePopup.close()"></text>
			<view class="front">
				<text class="text">使用5G专享小程序</text>
				<text class="text">步数越多权益越多</text>
				<button
					open-type="getAuthorize" 
					@getAuthorize="onGetAuthorize" 
					scope='userInfo'
					class="authorize"
					hover-class="none">
				    支付宝授权登录
				</button>
			</view>
		</view>
	</popup>
</template>

<script>
	import Popup from '@/components/uni/Popup';
	export default {
		name: 'Authorize',
		components: {
			Popup
		},
		methods: {
			open() {
				this.$refs.authorizePopup.open();
			},
			close() {
				this.$refs.authorizePopup.close();
			},
			// 用户授权
			onGetAuthorize(res) {
				let that = this;
				
				uni.showLoading({
					title: '登录中...'
				})
				
				// 获取会员基础信息
				my.getOpenUserInfo({
				    fail: (res) => {},
				    success: (res) => {
				        let userInfo = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
						
						// 获取token及用户信息
						uni.getAuthCode({
							scopes: 'auth_base',
							success: (codeRes) => {
								that.$service.common.step.auth({
								    authCode: codeRes.authCode,
									...userInfo
								}).then(async (authRes) => {
									await that.$store.dispatch('stepToken', { token: authRes.token });
									
									await that.$store.dispatch('getStepUserInfo');

									that.$emit('authorizeSuccess');
									
									uni.hideLoading();

									that.$refs.authorizePopup.close();
								})
							},
						})
				    },
				});

				my.reportAnalytics('click_zfbsqdl', {
					desc: '点击支付宝授权登录'
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
.authorize-popup {
	width: 496rpx;
	height: 494rpx;
	background: #fff;
	border-radius: 16rpx;
	position: relative;
	.image {
		width: 496rpx;
		height: 494rpx;
		position: absolute;
	}
	.icon-guanbi {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		font-size: 34rpx;
		color: #fff;
		z-index: 10;
	}
	.front {
		height: 494rpx;
		position: relative;
		@include flexBox(flex-end, center, column);
		.text {
			color: #4BA1FE;
			font-size: 28rpx;
		}
		.authorize {
			width: 304rpx;
			line-height: 68rpx;
			height: 72rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			background: #4BA1FE;
			border-radius: 50rpx;
			margin: 30rpx 0 20rpx 0;
		}
	}
}
</style>